<!DOCTYPE html>
<html>

<head>
  <title>TransitionBasic</title>
  <script src="d3.min.js"></script>
</head>

<body>
  <svg width="960" height="400" id="mainsvg" 
  class="svgs" style='display: block; margin: 0 auto;'>
      <rect id="my_rect" 
      x="10" y="200" width="200" height="30" 
      stroke="black" fill="#69b3a2" stroke-width="1"
      />
  </svg>
  <script>
      d3.select("#my_rect")//select选定了某个图元
      //紧跟在select后面的transition赋予选定的图元动画效果
      .transition().duration(2000)//动画持续时间duration单位是ms
      .attr("width", "400"); //attr即为具体的动画效果
      //只有transition后attr有动画效果
      //transition后不能再select
  </script> 
</body>

</html>